/* ================================ *** 登录 *** ================================ */
/* ================================ *** 登录 *** ================================ */
/* ============================================================ reset  ============================================================ */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
hr,
fieldset,
legend,
form,
label,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video,
mark,
a {
  margin: 0;
  padding: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  line-height: inherit;
}
ul,
ol,
menu {
  list-style: none;
}
li,
dt,
dd {
  vertical-align: middle;
}
input,
button,
select,
textarea {
  padding: 0;
  margin: 0;
  outline: none;
}
textarea {
  resize: none;
}
a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  *vertical-align: middle;
}
u,
s {
  text-decoration: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th,
td,
img {
  vertical-align: middle;
}
em,
i,
address {
  font-style: normal;
}
img,
fieldset,
iframe {
  border: 0;
}
a img,
img {
  display: block;
}
legend {
  display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
textarea {
  overflow-x: hidden;
  overflow-y: auto;
}
label {
  cursor: default;
}
q:before,
q:after {
  content: '';
}
:after,
:before {
  display: inline-block;
  background-position: center;
  background-repeat: no-repeat;
}
*,
:after,
:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* _________________________ html5 _________________________ */
html {
  -webkit-text-size-adjust: none;
}
/* 当样式表里font-size<12px时，中文版chrome浏览器里字体显示仍为12px */
/* _________________________ html5 _________________________ */
article,
aside,
footer,
header,
nav,
section,
figure,
figcaption,
hgroup,
main,
details,
summary,
menu,
canvas,
fieldset,
audio,
video {
  display: block;
}
body {
  word-wrap: break-word;
  /* _________________________ 设置字体的抗锯齿或者光滑度 _________________________ */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* _________________________ 屏蔽 IE10+ 浏览器密码框后面的小眼睛图标与 X _________________________ */
input::-ms-clear,
input::-ms-reveal {
  display: none;
}
/* _________________________ CSS阻止页面双击选中文本（FF） _________________________ */
/* _________________________ CSS3 去除浏览器input和button的默认样式 _________________________ */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none!important;
}
input[type="number"] {
  -moz-appearance: textfield;
}
/* _________________________ ie6 _________________________ */
/* 解决背景图片闪动和重复加载的 IE6 BUG */
/*
	'column'		 === 坚向布局
	'column-reverse' === 坚向反向布局
	'row'			 === 横向布局，默认值
	'row-reverse'	 === 横向反向布局
*/
/*
	'nowrap'		=== 不换行，默认值
	'wrap'			=== 自动换行
	'wrap-reverse'	=== 自动换行并反向
 */
/*
	flex-flow: flex-direction flex-wrap;
 */
/*
	'stretch' 	    === 拉伸到于父器等高，默认值。要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸
	'flex-start' 	=== 顶齐
	'center' 		=== 中对齐
	'flex-end'	 	=== 底对齐
	'baseline'	 	=== 元素位于容器的基线上
*/
/*
	'flex-start' 	 === 左对齐，默认值
	'center' 		 === 中对齐
	'flex-end'	 	 === 右对齐
	'space-between'	 === 两端对齐，两边无空隙，间隔平均分布
	'space-around'	 === 两端对齐，两边有空隙，两侧间隔相等
		
 */
/*
	'auto' 	     	 === 默认值。默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"
	'stretch' 	     === 拉伸到于父器等高。要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸
	'flex-start' 	 === 顶齐
	'center' 		 === 中对齐
	'flex-end'	 	 === 底对齐
	'baseline'	 	 === 元素位于容器的基线上
	'initial'	 	 === 设置该属性为它的默认值
	'inherit'	 	 === 从父元素继承该属性
 */
/*
	'number' 	 === 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。
	'initial'	 === 设置该属性为它的默认值
	'inherit'	 === 从父元素继承该属性
 */
/*
	'content-box'	=== 以内容为指定元素的宽度和高度
	'border-box'	=== 以包括padding和border的指定宽度和高度
	'inherit'	 	=== 从父元素继承该属性
 */
/***
 * use
	1、浏览器的默认字体大小是16px
	
		1em = 16px;
		1/16px  = 0.0625em;

	2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，按下面的公式来计算：

		1 ÷ 父元素的font-size（px） × 需要转换的像素值 = em值（1/16 * 18 = em）

	3、如果元素设置了字体大小，那么字体大小的转换依旧按第二条公式计算：

		1 ÷ 父元素的font-size（px） × 需要转换的像素值 = em值（1/16 * 18 = em）

	4、如果元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算：
	
		1 ÷ 元素自身的font-size(px) × 需要转换的像素值 = em值（1/14 * 960 = em）
 */
/* ================ fonts-size:62.5%
@px:0.1em;
@px:0.1rem;
*/
/* ================ font-size:1em;font-size:1rem;
@px:0.0625rem;
*/
/* ================================ *** 全局变量默认配置 *** ================================ */
/* ================================ *** extend *** ================================ */
/* ================================ *** value *** ================================ */
/* ================================ *** flexbox *** ================================ */
/*
  @bc: 背景颜色
  @color:字体颜色
  @h: 高
  @space:箭头尖角长度
  @arrow:箭头厚度
*/
/*
	.col-xs-1{.w(percentage(1/12))}	// 始终成一排栅格化
	.col-md-1{}						// 大于 992px 成一行，小于换行
	.col-sm-1{}						// 大于 768px 成一行，小于换行
	.col-lg-1{}						// 大于 1200px 成一行，小于换行
	把每列分为12等份：
		col-1： === 8.33333333%		=== 1/12
		col-2： === 16.66666667%	=== 1/6
		col-3： === 25%				=== 1/4
		col-4： === 33.33333333%	=== 1/3
		col-5： === 41.66666667%	=== 5/12
		col-6： === 50%				=== 1/2
		col-7： === 58.33333333%	=== 7/12
		col-8： === 66.66666667%	=== 2/3
		col-9： === 75%				=== 3/4
		col-10：=== 83.33333333%	=== 5/6
		col-11：=== 91.66666667%	=== 11/12
		col-12：=== 100%;			=== 1
 */
/* ================================ *** dropdown *** ================================ */
/* ================================ *** 后台模板 *** ================================ */
/* ================================ *** logo *** ================================ */
/* ================================ *** 左侧导航 *** ================================ */
/* ================================ *** 全局变量默认配置 *** ================================ */
html,
body {
  width: 100%;
  height: 100%;
  min-width: 320px;
}
body {
  font: 14px/20px Microsoft YaHei;
}
.r5px,
.login-content input[type='text'],
.login-content input[type='password'],
.login-content button,
.login-content button:hover {
  border-radius: 5px;
}
.linear,
.login-content input[type='text'],
.login-content input[type='password'],
.login-content button,
.login-content button:hover {
  transition: all 0.3s linear;
}
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #1976d2 inset;
  -webkit-text-fill-color: #fff;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^='font-'],
.font-icon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: inherit;
  font-size: inherit;
}
.font-lock:before {
  content: '\f13e';
}
.font-user:before {
  content: '\f007';
}
.font-close:before {
  content: '\f00d';
}
.login-wraper {
  background-color: #1976d2;
  background-image: -webkit-radial-gradient(ellipse farthest-corner at center top, #1976d2 0%, #000105 100%);
  background-image: radial-gradient(ellipse farthest-corner at center top, #1976d2 0%, #000105 100%);
}
.login-wraper,
.login-wraper canvas,
.login-wraper > section {
  width: 100%;
  height: 100%;
}
.login-wraper canvas {
  position: relative;
  z-index: 0;
}
.login-wraper > section {
  position: absolute;
  z-index: 10;
  left: 0px;
  top: 0px;
  display: table;
}
.login-wraper > section > div {
  display: table-cell;
  vertical-align: middle;
}
.login-content {
  width: 550px;
  color: #ffffff;
  text-align: center;
  margin: 0 auto;
}
.login-content h1 {
  font: bold italic 50px/100% Microsoft YaHei;
  letter-spacing: 10px;
  margin-bottom: 70px;
  white-space: nowrap;
}
.login-content input[type='text'],
.login-content input[type='password'] {
  width: 100%;
  font-size: 16px;
  font-family: inherit;
  text-align: center;
  height: 50px;
  border: 1px solid #ffffff;
  padding: 0px 40px;
  background-color: transparent;
  color: inherit;
}
.login-content input[type='text']:focus,
.login-content input[type='password']:focus {
  background-color: rgba(255, 255, 255, 0.3);
  text-align: left;
}
.login-content input::-webkit-input-placeholder {
  color: #ffffff;
}
.login-content ul {
  width: 400px;
  margin: 0 auto;
}
.login-content li {
  margin-top: 20px;
  position: relative;
  z-index: 0;
  line-height: 50px;
}
.login-content li:first-child {
  margin-top: 0px;
}
.login-content li i {
  position: absolute;
  z-index: 1;
  left: 10px;
  top: 0px;
  font-size: 24px;
  line-height: inherit;
}
.login-content li .font-lock {
  left: 12px;
}
.login-content .button {
  margin-top: 40px;
}
.login-content .button .error {
  left: 0px;
  top: -45px;
}
.login-content button {
  border: 1px solid #ffffff;
  height: 50px;
  font-family: inherit;
  width: 100%;
  display: block;
  font-size: 20px;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  font-weight: bold;
}
.login-content button:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.login-content .error {
  white-space: nowrap;
  position: absolute;
  z-index: 0;
  left: 410px;
  top: 0px;
  color: #ffffff;
}
.login-content .error q {
  margin-right: 3px;
}
@media (max-width: 768px) {
  .login-content {
    padding: 0px 10px;
  }
  .login-content,
  .login-content ul {
    width: 100%;
  }
  .login-content h1 {
    margin-bottom: 50px;
  }
}
@media (max-width: 400px) {
  .login-content h1 {
    font-size: 38px;
    margin-bottom: 30px;
  }
}
